import React from 'react'
import {Modal} from 'antd'
import styles from './index.less';

export default class PhotoItem extends React.PureComponent {
  props = {
    src: "",
    width: 80,
    disabled: false,
    title: ''
  }
  state = {
    visible: false
  }

  render() {
    const {disabled, title} = this.props
    return (
      <div>

        <div onClick={() => {
          this.setState({
            visible: true
          })
        }} style={{width: this.props.width, height: this.props.width}} className={styles.photoContainer}>
          <img className={styles.photo} src={this.props.src}/>
          {!disabled ? (<Modal onCancel={() => {
            this.setState({visible: false})
          }} visible={this.state.visible} title='查看图片' footer={null}>
            <img style={{width: '100%'}} src={this.props.src}/>
          </Modal>) : null}
        </div>
        {title ? (
          <p className={styles.photoTitle}>{title}</p>
        ) : null}
      </div>

    )
  }
}
